<template>
  <div >
      <header-view></header-view>
      <br><br>
      <div style="width: 98%; margin-left: auto; margin-right: auto;">
    <br>
    <el-card style="background-image: url('./images/OIP-C (1).jpg');
      background-size: cover;">
      <div>
      <h1 class="el-icon-s-promotion"> <a name="lastanalyse">最近分析</a></h1><br>
      <span >*下述仅为访客的分析记录，如果您不想在此显示自己的分析记录，请登录用户账号后再上传分析*</span>
    </div>
    <br><br><br>
    <el-table
      class="elTable"
      :data="testPage"
      border
      fit
      style="width: 100%; margin-left: auto; margin-right: auto; border-color: black;" 
      :cell-style="{ textAlign: 'center',height:'60px',borderColor:'black' }"
      :header-cell-style="{ textAlign: 'center',color:'black',height:'40px',borderColor:'black'}"
      >
      <el-table-column
        prop="app_name"
        label="APP"
        width="200">
      </el-table-column>
      <el-table-column
        prop="file_name"
        label="文件名称"
        width="200">
      </el-table-column>
      <el-table-column
        prop="package_name"
        label="包名">
      </el-table-column>
      <el-table-column
        prop="md5"
        label="MD5-HASH值">
      </el-table-column>
      <el-table-column
        prop="create_date"
        label="分析时间">
      </el-table-column>
      <el-table-column
        prop="action"
        label="操作"
        width="300">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row.package_name)" type="primary" size="small" icon="el-icon-view" text-align="center">分析报告</el-button>
          <!-- <el-button type="primary" size="small" icon="el-icon-document-remove" text-align="center"></el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24" style="text-align: right;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentpage"
            :page-sizes="[5, 10, 50, 100]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
      </el-col>
    </el-row>
    </el-card>
  </div>
  </div>
</template>

<script>
import HeaderView from '../components/HeaderView.vue'

export default {
  components: {
      HeaderView,
  },
  data() {
    return {
      testdata: [],
      baseURL: "http://127.0.0.1:8000",
      packagename:{},
      testPage: [],
      total: 10, //数据的总行数
      currentpage: 1, //当前所在的页数
      pagesize: 10,  //每页显示多少行
    }
  },
  mounted() {
    this.getMessages();
  },

methods: {
  handleClick(row) {
    this.packagename = {}
    this.packagename.append("package_name",row);
    let that = this;
    that.axios.post(that.baseURL+"#",that.packagename)
    .then(function(res){
      localStorage.setItem("packagename",JSON.stringify(res.data));
    })
    console.log(row);
  },
  getMessages:function(){
    //记录this的地址
    let that = this
    //使用Axios实现Ajax请求
    that.axios.get(that.baseURL+"/apk/index_details/apks/")
    .then(function(res){
      if(res.status==200){
        //把数据给testdata
        that.testdata = res.data;
        //获取返回记录的总行数
        that.total = res.data.length;
        //获取当前页的数据
        that.getPage();
      }
      //请求成功后执行的函数
      console.log(res.data);
    })
    .catch(function(err){
      //请求失败后执行的函数
      console.log(err)
    })
  },
  //获取当前页的数据
  getPage() {
        //清空testPage中的数据
        this.testPage = [];
        //获取当前页的数据
        for(let i=(this.currentpage - 1)* this.pagesize; i< this.total; i++){
          //遍历数据添加到testPage中
          this.testPage.push(this.testdata[i]);
          //判断是否达到一页的要求
          if (this.testPage.length === this.pagesize) break;
        }
      },
      //分页时修改每页的行数
      handleSizeChange(size) {
        //修改当前每页数据行数
        this.pagesize = size;
        //数据重新分页
        this.getPage();
      },
      handleCurrentChange(pageNumber) {
        //修改当前的页码
        this.currentpage = pageNumber;
        //数据重新分页
        this.getPage();
      },
},
}
</script>

<style>
.el-table--border{
color: black !important;
}
.el-table--enable-row-hover .el-table__body tr:hover:nth-child(even) > td {
  background-color: rgb(236, 233, 233) !important;
}
.el-table--enable-row-hover .el-table__body tr:hover:nth-child(odd) > td {
  background-color: rgb(236, 233, 233)!important;
}
.el-table__body tr:nth-child(even) {  
background-color: rgb(236, 233, 233); /* 偶数行（斑马线）的默认背景色 */  
}
</style>
